<template>
  <div class="grid gap-y-5">
    <el-card>
      <div
        slot="header"
      >
        <span class="text-xl font-bold">员工登记</span>
      </div>
      <el-form
        ref="form"
        :model="form.data"
        :rules="form.rule"
        size="medium"
        label-width="7rem"
      >
        <el-row>
          <el-col
            :span="24"
          >
            <el-form-item
              label="姓名"
              prop="bname"
            >
              <el-input
                v-model="form.data.bname"
                :style="{ width: '100%' }"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button
        type="primary"
        class="ml-28"
        @click="submit"
      >
        添加
      </el-button>
    </el-card>

    <el-card
      class="collapse"
      :class="collapse.t1.opened ? 'opened' : 'closed'"
    >
      <div
        slot="header"
        @click="toggleColl('t1')"
      >
        <i class="el-icon-arrow-right font-bold" />
        <span class="ml-2 text-xl font-bold">员工列表</span>
      </div>
      <el-collapse-transition>
        <div
          v-show="collapse.t1.opened"
        >
          <el-table
            :data="table.data"
            stripe
            style="width: 100%"
          >
            <el-table-column
              prop="bid"
              label="员工编号"
            />
            <el-table-column
              prop="bname"
              label="姓名"
            />
          </el-table>
        </div>
      </el-collapse-transition>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      collapse: {
        t1: {
          opened: false,
          state: 0
        }
      },
      form: {
        data: {
          bname: undefined
        },
        rule: {
          bname: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            }
          ]
        }
      },
      table: {
        data: [{ bid: '加载中' }]
      }
    }
  },
  methods: {
    submit () {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return
        }
        this.axios.post(`/api/ent/${(1 * this.$store.state.ent.etype) === 101 ? 'breeder' : 'butcher'}/add`, null, {
          headers: {
            token: this.$store.state.ent.token
          },
          params: {
            bname: this.form.data.bname
          }
        }).then(function (r) {
          this.$alert(r.data.msg)
        }.bind(this))
      })
    },
    toggleColl (cid) {
      this.collapse[cid].opened = !this.collapse[cid].opened
      this.tryLoadData(cid)
    },
    tryLoadData (cid) {
      if (this.collapse[cid].opened) {
        if (!this.collapse[cid].loaded && !this.collapse[cid].loading) {
          this.collapse[cid].loading = true
          this.axios.get(`/api/ent/${(1 * this.$store.state.ent.etype) === 101 ? 'breeder' : 'butcher'}/list`, {
            headers: {
              token: this.$store.state.ent.token
            }
          }).then(function (r) {
            this.table.data = r.data.detail
          }.bind(this)).finally(function () {
            this.collapse[cid].loaded = true
            this.collapse[cid].loading = false
          }.bind(this))
        }
      }
    }
  }
}
</script>
